<template>
  <div class="myBalance">
    <div v-if="balanceTotal*1>=0">
      <!--    导航开始-->
      <commonHeader
        :title="title"
        :subtitle="subtitle"
        @goBack="goBack()"
        @goSubtitle="goSubtitle()">
      </commonHeader>
      <!--    导航结束-->
      <!--    内容开始-->
      <!--    下拉刷新-->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <div class="content">
          <!--      我的总矿金-->
          <div class="totalMoney flex-space-center">
            <div class="balanceRule" @click="clickShowRule">提现规则</div>
            <div class="money">{{balanceTotal}}</div>
            <span class="describe">当前余额（元）</span>
            <!--            按钮-->
            <div class="button flex-space-center">
              <!--          昨日数据不显示每日签到 -->
              <button>
                <router-link to="contactCustomer">提现</router-link>
              </button>
            </div>

          </div>
          <!--      列表内容-->
          <div class="lists">
            <div class="balanceMoney">
              <van-list
                v-if="bonusList&&bonusList.length*1>0"
                v-model="loading"
                :finished="finished"
                :offset="20"
                :immediate-check="false"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <list :list="bonusList" @confirmBalance="receiveBonus"></list>
              </van-list>
              <div v-else class="nodata flex-space-center">
                暂无数据！
              </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>

      <!--    内容结束-->
    </div>
    <div class="nodata flex-space-center" v-else>
      暂无数据！
    </div>
<!--    提现规则弹框-->
    <van-popup v-model="showRule">
      <h2>余额提现规则</h2>
      <p>所有提现相关费用，时间问题，请咨询客服。</p>
    </van-popup>
  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader.vue"
  import list from "./components/list.vue"
  import {GETBONUSLIST,RECEIVEBONUS,GETBALANCETOTAL} from '../../apis/mine';
  export default {
    name:"myBalance",
    components:{
      commonHeader,
      list
    },
    data() {
      return {
        title:"我的余额",//标题
        subtitle:"账单",//副标题
        balanceTotal:0,//余额总数
        bonusList:[],//余额列表
        showRule:false,//是否显示提现规则
        // 上拉加载下拉刷新配置
        loading: false,//
        finished: false,//上拉加载完毕
        refreshing: false,
        page:1,//分页页数
        pageSize:10,//每页数据
      }
    },
    computed: {

    },
    mounted() {
      // 余额总数
      this.getBalanceTotal()
      // 分红列表
      this.getBonusList()
    },
    methods: {
      // 返回
      goBack(){
        this.$router.back()
      },
      // 提现规则
      clickShowRule(){
        this.showRule = true;
      },
      // 跳到账单页
      goSubtitle(){
        this.$router.push("balanceBill")
      },
      // 加载中初始化
      loadingInit(){
        this.bonusList = [];
        this.page = 1;
        this.loading = false;
        this.finished = false;
        this.refreshing = false;
      },
      // -------------------------接口开始------------------------
      // 获取我的余额总数
      getBalanceTotal(){
        let getBalanceTotal = GETBALANCETOTAL
        getBalanceTotal().then(res=>{
          if(res.data.code*1===200){
            this.balanceTotal = res.data.data.balance?res.data.data.balance:0;//余额总数
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // 领取分红
      receiveBonus(item){
        let receiveBonus = RECEIVEBONUS
        let params = {
          poll_id:item.id
        }
        receiveBonus(params).then(res=>{
          if(res.data.code*1===200){
            this.loadingInit();//加载初始化
            this.getBonusList();//分红列表
            this.getBalanceTotal();// 余额总数
            // 更新用户矿金
            if (that.$systemInfo() === "android") {
              window.android.updateUserGold();
            } else if (that.$systemInfo() === "ios") {
              window.webkit.messageHandlers.updateUserGold.postMessage();
            }
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // 分红列表
      getBonusList(){
        let getBonusList = GETBONUSLIST
        getBonusList().then(res=>{
          if(res.data.code*1===200){
            // 下拉刷新
            if (this.refreshing) {
              this.bonusList = [];
              this.refreshing = false;
            }
            this.loading = false;
            const bonusList = res.data.data.data;//每日挖矿列表
            if(bonusList == null || bonusList.length*1 === 0){
              this.finished = true
              return
            }
            if(bonusList.length*1 < this.pageSize){
              this.finished = true
            }
            if(this.page*1 == 1){
              this.bonusList = bonusList
            }else{
              this.bonusList = this.bonusList.concat(bonusList)
            }

          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },

      // 上拉加载
      onLoad() {
        this.page++;
        this.getBonusList()
      },
      // 下拉刷新
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.page=1;
        this.getBonusList()
      },
      // -------------------------------接口结束-----------------
    },

  };
</script>

<style lang='less' scoped>
  @import (reference) url(../../assets/less/common);
  .myBalance{
    width:100%;
    background:#000000;
    overflow-y: scroll;
    padding-top: 1.38rem;
    box-sizing: border-box;
    .content{
      width:100%;
      background:#000000;
      padding:0.3rem;
      box-sizing: border-box;
      /*我的总矿金*/
      .totalMoney{
        width:100%;
        background:#232323;
        border-radius:0.2rem;
        flex-direction: column;
        padding:0.18rem 0 0.3rem 0;
        box-sizing: border-box;
        margin-bottom:0.3rem;
        .balanceRule{
          width: 100%;
          padding:0 0.24rem 0 0;
          box-sizing: border-box;
          text-align: right;
          font-size:@fontSize30;
          font-family:@fontFamily400;
          font-weight:@fontWeight400;
          color:#FFFFFF;
        }
        .money{
          font-size:1.4rem;
          font-family:Arial;
          font-weight:@fontWeight400;
          line-height:1.3rem;
          color:#FFFFFF;
        }
        .describe{
          font-size:@fontSize36;
          font-family:@fontFamily400;
          font-weight:@fontWeight400;
          line-height:0.7rem;
          color:#FFFFFF;
        }
        .button{
          width:100%;
          padding:0 1.2rem;
          box-sizing: border-box;
          button{
            width:1.74rem;
            height:0.56rem;
            background:#FDE50C;
            border-radius: 0.3rem;
            font-size:@fontSize30;
            font-family:@fontFamily400;
            font-weight:@fontWeight600;
            line-height:0.4rem;
            color:#4C4720;
            margin-top:0.2rem;
          }
          .isSign{
            background:rgba(255,255,255,0.3);
            color:#ffffff;
          }
        }

      }

      /*矿金列表*/
      .lists{
        width:100%;
        min-height:6.8rem;
        background:#232323;
        border-radius: 0.2rem;
        padding:0 0.19rem;
        box-sizing: border-box;
        margin-top:0.3rem;
        .balanceMoney{
          padding:0.37rem 0;
          box-sizing: border-box;
        }
      }
    }
    .nodata{
      width:100%;
      height:3rem;
      color:#FEA300;
    }
    /deep/.van-overlay{
      background-color: rgba(0,0,0,0.6);
    }
    /deep/.van-popup{
      padding:0.3rem;
      box-sizing: border-box;
      h2{
        text-align: center;
        margin-bottom: 0.2rem;
        color:#000000;
        font-size: @fontSize40;
      }
      p{
        text-align: justify;
        color:#000000;
        font-size: @fontSize30;
      }
    }
  }
</style>
